<template>
  <n-layout class="layout" :position="fixedMenu" :has-sider="true">
    <n-layout-sider
      show-trigger="bar"
      @collapse="appStateStore.sideBarCollapse = true"
      @expand="appStateStore.sideBarCollapse = false"
      :position="fixedMenu"
      :collapsed="appStateStore.sideBarCollapse"
      :collapsed-width="64"
      collapse-mode="width"
      :native-scrollbar="false"
      :bordered="true"
      :inverted="inverted"
      class="layout-sider"
    >
      <v-logo :collapsed="appStateStore.sideBarCollapse === true"></v-logo>
      <side-menu
        :collapsed="appStateStore.sideBarCollapse === true"
      ></side-menu>
    </n-layout-sider>
    <n-layout>
      <n-layout-header :inverted="inverted" :bordered="true">
        <v-header :menu-list="menuList" :inverted="inverted"></v-header>
      </n-layout-header>
      <n-layout-content
        class="layout-content"
        :class="{ 'layout-default-background': true }"
      >
        <main-content />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script lang="ts" setup>
// 侧边栏是否折叠
import VLogo from "@/layouts/Logo/VLogo.vue";
import SideMenu from "@/layouts/Menu/SideMenu.vue";
import VHeader from "@/layouts/Header/VHeader.vue";
import { useAppStateStore } from "@/store/modules/system/appState";
import MainContent from "@/layouts/Main/MainContent.vue";

const appStateStore = useAppStateStore();

// 菜单使用绝对定位还是随系统滚动.
// TODO 后面要改成可调整的.
const fixedMenu = computed(() => {
  return "absolute";
});

// 侧边导航栏样式.
// TODO 后面要改成可调整的.
const inverted = computed(() => {
  return "dark" !== "dark";
});

const menuList = ref([] as Array<string>);
</script>

<style lang="less" scoped>
.layout {
  display: flex;
  flex-direction: row;
  flex: auto;

  .layout-sider {
    min-height: 100vh;
    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    position: relative;
    z-index: 13;
    transition: all 0.2s ease-in-out;
  }

  &-default-background {
    background: #f5f7f9;
  }

  &-content {
    flex: auto;
    min-height: 100vh;
  }

  .n-layout-header.n-layout-header--absolute-positioned {
    z-index: 11;
  }
}
</style>
